<!--
 * @Description: 打印队列状态提示组件 - 右下角非阻塞提示
 * @Author: AI Assistant
 * @Date: 2024-12-19
-->
<template>
  <transition name="slide-up">
    <div v-if="visible" class="print-queue-notification">
      <div class="notification-content">
        <div class="header">
          <div class="icon">
            <svg
              width="20"
              height="20"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M6 9V2H18V9"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M6 18H4C3.44772 18 3 17.5523 3 17V11C3 10.4477 3.44772 10 4 10H20C20.5523 10 21 10.4477 21 11V17C21 17.5523 20.5523 18 20 18H18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
              <path
                d="M6 14H18V22H6V14Z"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
          <div class="title">打印队列</div>
          <div class="close-btn" @click="hide">
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M18 6L6 18M6 6L18 18"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
              />
            </svg>
          </div>
        </div>

        <div class="status-info">
          <div class="status-item">
            <span class="label">待打印:</span>
            <span class="value pending">{{ queueStatus.pending }}</span>
          </div>
          <div class="status-item">
            <span class="label">打印中:</span>
            <span class="value printing">{{ queueStatus.printing }}</span>
          </div>
          <div class="status-item">
            <span class="label">已完成:</span>
            <span class="value completed">{{ queueStatus.completed }}</span>
          </div>
          <div class="status-item" v-if="queueStatus.failed > 0">
            <span class="label">失败:</span>
            <span class="value failed">{{ queueStatus.failed }}</span>
          </div>
        </div>

        <div class="progress-bar" v-if="queueStatus.total > 0">
          <div class="progress-fill" :style="{ width: progressPercentage + '%' }"></div>
        </div>

        <div class="current-task" v-if="currentTask">
          <div class="task-info">
            <span class="task-name">{{ currentTask.name }}</span>
            <span class="task-status">{{ getTaskStatusText(currentTask.status) }}</span>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'

interface QueueStatus {
  total: number
  pending: number
  printing: number
  completed: number
  failed: number
}

interface TaskInfo {
  id: string
  name: string
  status: 'pending' | 'printing' | 'completed' | 'failed'
}

const visible = ref(false)
const queueStatus = ref<QueueStatus>({
  total: 0,
  pending: 0,
  printing: 0,
  completed: 0,
  failed: 0
})
const currentTask = ref<TaskInfo | null>(null)

// 计算进度百分比
const progressPercentage = computed(() => {
  if (queueStatus.value.total === 0) return 0
  const completed = queueStatus.value.completed + queueStatus.value.failed
  return Math.round((completed / queueStatus.value.total) * 100)
})

// 获取任务状态文本
const getTaskStatusText = (status: string) => {
  const statusMap = {
    pending: '等待中',
    printing: '打印中',
    completed: '已完成',
    failed: '失败'
  }
  return statusMap[status] || status
}

// 显示通知
const show = () => {
  visible.value = true
}

// 隐藏通知
const hide = () => {
  visible.value = false
}

// 更新队列状态
const updateStatus = (status: QueueStatus) => {
  queueStatus.value = { ...status }

  // 如果有任务在进行，显示通知
  if (status.total > 0) {
    show()
  } else {
    // 延迟隐藏，让用户看到完成状态
    setTimeout(() => {
      hide()
    }, 2000)
  }
}

// 更新当前任务
const updateCurrentTask = (task: TaskInfo | null) => {
  currentTask.value = task
}

// 暴露方法给外部调用
defineExpose({
  show,
  hide,
  updateStatus,
  updateCurrentTask
})

// 组件挂载时注册到全局
onMounted(() => {
  if (window.__printQueueNotification__) {
    window.__printQueueNotification__.instance = {
      show,
      hide,
      updateStatus,
      updateCurrentTask
    }
  }
})

onUnmounted(() => {
  if (window.__printQueueNotification__) {
    window.__printQueueNotification__.instance = null
  }
})
</script>

<style lang="scss" scoped>
.print-queue-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 320px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  border: 1px solid #e5e7eb;
  z-index: 9999;
  backdrop-filter: blur(10px);
}

.notification-content {
  padding: 16px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;

  .icon {
    width: 24px;
    height: 24px;
    color: #7c0a03;
    margin-right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .title {
    flex: 1;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
  }

  .close-btn {
    width: 20px;
    height: 20px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;

    &:hover {
      background: #f3f4f6;
      color: #6b7280;
    }
  }
}

.status-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;

  .status-item {
    display: flex;
    align-items: center;
    font-size: 14px;

    .label {
      color: #6b7280;
      margin-right: 4px;
    }

    .value {
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 12px;

      &.pending {
        background: #fef3c7;
        color: #d97706;
      }

      &.printing {
        background: #dbeafe;
        color: #2563eb;
      }

      &.completed {
        background: #d1fae5;
        color: #059669;
      }

      &.failed {
        background: #fee2e2;
        color: #dc2626;
      }
    }
  }
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: #f3f4f6;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;

  .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c0a03 0%, #a855f7 100%);
    transition: width 0.3s ease;
  }
}

.current-task {
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  border-left: 3px solid #7c0a03;

  .task-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;

    .task-name {
      color: #374151;
      font-weight: 500;
      flex: 1;
      margin-right: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .task-status {
      color: #7c0a03;
      font-size: 12px;
      font-weight: 600;
    }
  }
}

// 动画效果
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.3s ease;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(100%);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
</style>
